<template>
	<section class="morepic">
		<van-row gutter="5" type="flex" class="build-mtb">
			<van-col span="12">
			<router-link class="everypic" to="/goodsdetail" tag="li">					
					<img class="everypicimg" src="./../assets/img/userimg1.jpg" alt="">
					<div class="showpic">
						<p>厨房照出炉啦，Duang~</p>
						<div class="headandname">
							<img class="everyhead" src="./../assets/img/userimg1.jpg" alt="">
							<span class="username">西顾顾啊</span>
						</div>
					</div>
				</router-link>
			</van-col>
			<van-col span="12">
				<router-link class="everypic" to="/goodsdetail" tag="li">					
					<img class="everypicimg" src="./../assets/img/userimg1.jpg" alt="">
					<div class="showpic">
						<p>厨房照出炉啦，Duang~</p>
						<div class="headandname">
							<img class="everyhead" src="./../assets/img/userimg1.jpg" alt="">
							<span class="username">西顾顾啊</span>
						</div>
					</div>
				</router-link>
			</van-col>			
		</van-row>			
	</section>
</template>

<script>
import { Row, Col } from 'vant'
import Header from './Header'
import Vue from 'vue'

Vue.use(Row).use(Col)
export default {
	data () {
		return {}
	},
	components: {
		Header
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.morepic{
	margin:0 0.1rem;
}
.everypic{
	list-style: none;
	background: #eee;
	margin-top:0.1rem;
	img{
		height:1.8rem;
		width:100%;
	}
	.showpic{
		width:100%;
		height:0.8rem;
		padding:0.08rem;
		box-sizing: border-box;
		p{
			font-size: 0.12rem;
		}
		.everyhead{
			margin-top:0.08rem;
			width:0.34rem;
			height: 0.34rem;
			border-radius: 50%;
		}
		.username{
			display: inline-block;
			font-size: 0.12rem;
		}
	}
}
</style>
